<template>
  <div style="margin-top: 30px">
    <el-form ref="form" :model="formData" :rules="rules" label-width="100px" @submit.native.prevent>
      <el-form-item label="接入数据源" prop="product">
        <el-button icon="el-icon-thumb" @click="handleSelectData">请选择</el-button>
        <span
          >&nbsp;&nbsp;没找到？点击此处可<el-button type="text" @click="handleAddProduct"
            >新增接入数据源</el-button
          ></span
        >
        <el-table :data="importProduct" :header-cell-style="{ background: '#F3F5FC' }">
          <el-table-column label="序号" align="center" width="120">
            <template slot-scope="scop">
              {{ scop.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="规则名称" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="接入产品" prop="productName" :show-overflow-tooltip="true" />
          <el-table-column label="元数据" prop="companyName" width="140" />
          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <EditDialog ref="addRef" title="新增" />
    <SelectDialog ref="selectRef" title="选择接入数据" />
  </div>
</template>

<script>
import EditDialog from '../../components/productEditor'
import SelectDialog from '../../components/taskSelector'

export default {
  name: 'Step3',
  components: { EditDialog, SelectDialog },
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      showAddDialog: false,
      showSelectDialog: false,
      importProduct: [
        {
          name: '华为防火墙',
          prodcutName: '防火墙',
          companyName: '华为',
          versionName: 'V1.0',
        },
      ],
      // 表单参数
      rules: {
        name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
        way: [{ required: true, message: '请选择数据源类型', trigger: 'blur' }],
      },
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.formData.roleId != undefined) {
            this.$modal.msgSuccess('修改成功')
            this.isOpen = false
            this.$emit('changeOpen', false)
          } else {
            this.$modal.msgSuccess('新增成功')
            this.isOpen = false
            this.$emit('changeOpen', false)
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const name = row.name
      this.$modal
        .confirm('是否确认删除角色编号为"' + name + '"的数据项？')
        .then(function () {
          return true
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    handleAddProduct() {
      this.$refs.addRef.isOpen = true
    },
    /**  点击 ‘请选择’ **/
    handleSelectData() {
      this.$refs.selectRef.isOpen = true
    },
    /**  关闭弹窗 **/
    handleSelectOpen(value) {
      this.showSelectDialog = value
    },
  },
}
</script>

<style scoped>
.demo-ruleForm {
  width: 90%;
  margin-top: 30px;
}
</style>
